<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
	<el-dialog 
    :visible.sync="Show"
    :close-on-click-modal="false"
    :append-to-body="true"
    :show-close='false' custom-class="markPlacefulldialog">
        <div slot="title" class="dialog-header">
          <span class="mark-place-title" v-if="sensorinfo.num!=''">标记传感器 - “{{sensorinfo.name[1]}} {{sensorinfo.num}}”</span>
          <span class="mark-place-title" v-else>标记传感器</span>
          <div class="mark-button">
          <el-button type="primary" @click="markcreate()" size="mini">保 存</el-button>
          <el-button @click="markcancel()" size="mini" type="text">取 消</el-button>
          </div>
        </div>
        <el-row class="mark-img-wrap">
            <div style="position: absolute;" v-drag  class="curentimg" ref="curentimg">
                <img :src="getimgpath" ref="imgsize" id="imgsize">
                <div class="mark-icon" ref="markicon" style="font-size: 40px;">
                	<icon-svg icon-class="checklocal" style="font-size: 40px;position: absolute;"/> 
                </div>
            </div>
            <div class="scaleimg">
            <i class="el-icon-plus" style="color: #000000;padding: 1px;border-bottom: 1px solid #dddddd;" @click="scalebig"></i><br>
            <i class="el-icon-minus" @click="scalesmall" style="color: #000"></i>
            </div>
        </el-row>
    </el-dialog>
</template>
<script>
	export default{
    name:"markPlace",
		props:{
      Show:Boolean,
      getimgpath:{default:""},
      positionSign:{default:""},
      sensorinfo:{type:Object}
    },
		data(){
      let self = this;
			return{
		      	markleft:"",
		      	marktop:"",
		      	scale:null,
			}
        },
        mounted(){
        },
		methods:{
			setimgpos(){
		        this.$refs.curentimg.style.left="50%";
		        this.$refs.curentimg.style.top="50%";
		        this.$refs.curentimg.style.transform="translate(-50%,-50%)";
		        if(this.$refs.imgsize.naturalWidth!==0){
                    this.$refs.curentimg.style.width=this.$refs.imgsize.style.width=this.$refs.imgsize.naturalWidth+"px";
                }
                if (this.positionSign=="") {                   
                    this.$refs.markicon.style.opacity = "0"
                    this.$refs.markicon.style.left="";
                    this.$refs.markicon.style.top="";               
                }else{

                    this.$refs.markicon.style.opacity = "1";
                    this.markleft=this.positionSign.split(",")[0];
                    this.marktop=this.positionSign.split(",")[1];
                    this.$refs.markicon.style.left=this.markleft+"px";
                    this.$refs.markicon.style.top=this.marktop+"px";
                }
		    },
		    scalebig(){
		        if (this.$refs.imgsize.width/this.$refs.imgsize.naturalWidth>4) {
		            return false;
		        }
		        this.$refs.imgsize.style.width=this.$refs.imgsize.width*1.2+"px";
		        this.$refs.markicon.style.left=parseFloat(this.$refs.markicon.style.left)*1.2+"px";
		        this.$refs.markicon.style.top=parseFloat(this.$refs.markicon.style.top)*1.2+"px";
		        //this.$refs.markicon.style.fontSize=parseFloat(this.$refs.markicon.style.fontSize)*1.2+"px"
		    },
		    scalesmall(){
		        if (this.$refs.imgsize.naturalWidth/this.$refs.imgsize.width>4) {
		            return false;
		        }
		        this.$refs.imgsize.style.width=this.$refs.imgsize.width/1.2+"px";
		        this.$refs.markicon.style.left=parseFloat(this.$refs.markicon.style.left)/1.2+"px";
		        this.$refs.markicon.style.top=parseFloat(this.$refs.markicon.style.top)/1.2+"px";
		        //this.$refs.markicon.style.fontSize=parseFloat(this.$refs.markicon.style.fontSize)/1.2+"px"
		    },
		    markcancel(){
		    	this.$emit("update:Show",false);
		    },
		    markcreate(){
                let position=parseFloat(this.markleft)+","+parseFloat(this.marktop);
                this.$emit("sendMarkInfo",position);
		    }
		},
		watch:{
			Show:function(val){
                
				if (val) {
                    let self=this;
                    this.$nextTick(function(){
                        self.setimgpos();
                    })
				}
			}
		},
		 directives: {
         drag(el,binding,vnode) {
             let odiv = el;
             let isdrag=false;
             let disX,disY,left,top,x1,y1,x2,y2,d;
             let sizecount=1;
             let sizescale;
             function rendermark(param,nsize,nscale){
               
                param==0?[
                    vnode.context.$refs.markicon.style.left=(parseFloat(vnode.context.$refs.markicon.style.left))/1.1+"px",
                    vnode.context.$refs.markicon.style.top=(parseFloat(vnode.context.$refs.markicon.style.top))/1.1+"px",
                    vnode.context.markleft=(parseFloat(vnode.context.$refs.markicon.style.left))*nsize,
                    vnode.context.marktop=(parseFloat(vnode.context.$refs.markicon.style.top))*nsize
                ]:[
                    vnode.context.$refs.markicon.style.left=(parseFloat(vnode.context.$refs.markicon.style.left))*1.1+"px",
                    vnode.context.$refs.markicon.style.top=(parseFloat(vnode.context.$refs.markicon.style.top))*1.1+"px",
                    vnode.context.markleft=(parseFloat(vnode.context.$refs.markicon.style.left))*nsize,
                    vnode.context.marktop=(parseFloat(vnode.context.$refs.markicon.style.top))*nsize
                ];
             };
             let prevwidth=el.getBoundingClientRect().width;
             odiv.onmousedown = (e) => {
                e = e || window.event;
                e.preventDefault();
                 isdrag=true;
                 disX = e.clientX - odiv.offsetLeft; 
                 disY = e.clientY - odiv.offsetTop;
                 x1=e.clientX;
                 y1=e.clientY;
            }; 
            odiv.onmousemove = (e)=>{
                e = e || window.event;
                e.preventDefault();
                 if (isdrag) {
                     left = e.clientX - disX; 
                     top = e.clientY - disY;
                     odiv.style.left = left + 'px'; 
                     odiv.style.top = top + 'px'; 
                 }
            }; 
            window.onmouseup = (e) => {
                e = e || window.event;
                e.preventDefault();
                isdrag=false;
                x2=e.clientX;
                y2=e.clientY;
                document.onmousemove = null; 
                document.onmouseup = null; 
            };
            odiv.onmousewheel=(e)=>{
                e = e || window.event;
                e.preventDefault();
                if (e.target.nodeName=="use"||e.target.nodeName=="svg") {
                  return;
                };
                if (e.deltaY>0) {
                    if (e.target.naturalWidth/e.target.width>4) {
                        return false;
                    };
                    sizecount=e.target.naturalWidth/e.target.width;
                    sizescale=e.target.width;
                    //vnode.context.$refs.markicon.style.fontSize=parseFloat(vnode.context.$refs.markicon.style.fontSize)/1.1+"px"
                    odiv.style.width=e.target.style.width=e.target.width/1.1+"px";
                    rendermark(0,sizecount,sizescale);
                }else{
                    if (e.target.width/e.target.naturalWidth>4) {
                        return false;
                    }
                    sizecount=e.target.naturalWidth/e.target.width;
                    //vnode.context.$refs.markicon.style.fontSize=parseFloat(vnode.context.$refs.markicon.style.fontSize)*1.1+"px"
                    odiv.style.width=e.target.style.width=e.target.width*1.1+"px";
                    sizescale=e.target.width;
                    rendermark(1,sizecount,sizescale);
                }
            }
            odiv.onclick=(e)=>{
                 e.preventDefault();
                 d = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
                 let fontS=parseFloat(vnode.context.$refs.markicon.style.fontSize);
                 if (d==0||d<7) {
                    vnode.context.$refs.markicon.style.opacity = '1';
                    vnode.context.$refs.markicon.style.left=(e.offsetX-40/2)+"px";
                    vnode.context.markleft=(e.offsetX-40/2)*sizecount+"px"
                    vnode.context.$refs.markicon.style.top=(e.offsetY-40)+"px";
                    vnode.context.marktop=(e.offsetY-40)*sizecount+"px";
                 }
            }
        } 
    },
	}
</script>
<style lang="scss">
.dialog-header{
    padding: 16px 10px 26px;
    display: flex;
    justify-content: space-between;
}
.mark-place-title{
    font-size: 24px;
    width:70%;
    color:#50E3C2;
}
.markPlacefulldialog {
        width: 80%;
        .mark-button{
          text-align:left;
          display:inline-block;
          width: 170px;
          .el-button{
            float:left;
          }
        }
  }
.mapwrap{
    width: 100%;
    height: 740px;
}
.markPlacefulldialog .el-dialog__body{
    padding: 0;
}
.markPlacefulldialog{
    border-radius: 10px;
}
.search-box{
    position:absolute !important;
    margin-left:50%;
    transform:translateX(-50%);
    margin-top:10px;
}
.mark-img-wrap{
        position:relative;
        width:100%;
        height:576px;
        overflow:hidden;
        text-align:center;
    }
    .mark-img-wrap img{
        cursor:pointer;
    }
    .curentimg{
        left:50%;
        top:50%;
        transform:translate(-50%,-50%)
    }
    .scaleimg{
        background:#ffffff;
        position:absolute;
        bottom:20px;
        right:26px;
        cursor:pointer;
        border: solid 1px #d4d4d4;
        box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.19);
    }
    .addsensordialog .el-dialog__body{
        padding:0 20px;
    }
    .mark-icon{
        position:absolute;
        display:inline-block;
        left:10px;
        top:0;
        color:#2683f5;
        font-size:40px;
    }
</style>
